<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { getPaymentCollectAmount } from "@/api/province_jsc";
const animationDuration = 3000;

export default {
  mixins: [resize],
  props: {
    listQuery: {
      type: Object,
    },
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "1200px",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      showbtns: false,
      chart: null,
      xData: ['1月', '2月', '3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
      yData: [500000, 1000000, 1500000,2000000, 2500000, 3000000,3500000, 4000000, 4500000,5000000],
      lineData:[70000, 246000, 0,609104.44, 392438.32, 1491997.56,713720.22, 0, 1619000,68000],
      lineData2:[70000, 316000, 316000,925104.44, 1317542.76, 2809540.32,3523260.54,3523260.54, 5142260.54,5210260.54,],
    };
  },
  mounted() {
    this.getList();
    
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
 methods: {
      handleClose(){
      this.editDisabled = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
       getList() {
       if(this.listQuery.year!='2020'){
        
           
           this.xData=[];
           this.yData=[];
           this.lineData=[];
           this.lineData2=[];
            this.initChart();
           return false
         }else{
           this.xData= ['1月', '2月', '3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
      this.yData=[500000, 1000000, 1500000,2000000, 2500000, 3000000,3500000, 4000000, 4500000,5000000],
      this.lineData=[70000, 246000, 0,609104.44, 392438.32, 1491997.56,713720.22, 0, 1619000,68000],
      this.lineData2=[70000, 316000, 316000,925104.44, 1317542.76, 2809540.32,3523260.54,3523260.54, 5142260.54,5210260.54,],
           this.$nextTick(() => {
      this.initChart();
    });
      }
      getPaymentCollectAmount(this.listQuery).then((res) => {
        // this.xData = res.data.data.map(function (obj, index, array) {
        //   var rObj = [];
        //   rObj = obj.week;
        //   return rObj;
        // });
        // this.yData = res.data.data.map(function (obj, index, array) {
        //   var rObj2 = [];

        //   rObj2 = obj.collectionAmount;
        //   return rObj2;
        // });
        this.$nextTick(() => {
      this.initChart();
    });
      });
    },
    initChart() {
      let _self = this;
      this.chart = echarts.init(this.$el, "macarons");
     
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        color: ["#FF89B0FF", "#FFCF5AFF", "#6EF3EDFF"],
        legend: {
          top: "-5",
           data: ['回款基准（元）', '回款金额（元）', '回款累计（元）']
        },
     
        xAxis: [
          {
             type: "category",
             axisTick:{
              show:false
            },
            boundaryGap: false,
            axisLine: {
              
              lineStyle: {
                color: "#616266",
              },
            },
            data: this.xData
           
          },
        ],
          yAxis: [
          {
            type: "value",
             axisLine: {
                show:false,
              lineStyle: {
                color: "#616266",
              },
            },
            axisTick: {
              show: false,
            },
             axisLine: {
                show:false,
              lineStyle: {
                color: "#616266",
              },
            },
             axisLabel: {
            formatter: '{value}元'
        }
          },
        ],
        series: [
          {
            name: '回款基准（元）',
            type: 'line',
            data: this.yData,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
         
        },
        {
            name: '回款金额（元）',
            type: 'line',
             data: this.lineData,
       
          
        },
         {
            name: '回款累计（元）',
            type: 'line',
            data: this.lineData2,
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
       
        }
        ],
      });
    },
  },
};
</script>
